<template>
    <el-container>
        <el-main>
            <div class="margin-top" v-for="(blog,index) in showList" :key="index">   
                <div class="blog-header">
                    <h2>{{blog.title}}</h2>
                    <label for="">标签：</label><el-tag size="small">{{blog.tag}}</el-tag>
                    <el-button type="primary" @click="toDetailWithList(index)">查看详情</el-button>
                </div>
                <div class="detail-content">
                    <label for="">内容简介：</label>
                    <p>{{blog.content}}</p>
                </div>               
            </div>
        </el-main>
    </el-container>
    <div class="pagination">
        <el-switch v-model="onepage"/>
        <el-pagination
            background
            :hide-on-single-page="onepage"
            :page-size="pageSize"
            :total="totalBlogs"
            @current-change="handleCurrentChange"
            v-model="pager"
            layout="prev, pager, next"
            />
  </div>
</template>

<script>
export default {
    name:"blogList",
    data(){
        return {
            onepage:false,
            pageSize:3,
            totalBlogs:this.pageSize,
            pager:1,
            showList:[],
            blogList:[{
                title:"博客1",
                tag:"Vue",
                content:`1. 不要盲目地去追求，如果你纯粹地喜欢的话，就请纯粹的坚持下去。
                    2. 我热爱的事情都有机会尝试，我很幸运。
                    3. 尽自己的所能做到最好吧，在自己能力范围内，做到最好，继续努力。
                    4. 成长就是回到原来摔倒的地方，再来一次。
                    5.  如果今天有困难的话就今天去解决，不要拖。今天是今天，明天是明天，所以才会有今天和明天这两个词。
                    6. 我哪里都不去，我选择当下。
                `
            },
            {
                title:"博客2",
                tag:"Vue",
                content:`7. 我觉得每一个人生下来，被分到的困难和艰难都是不同的，在得到这些艰难跟困难的同时，还要去坚持自己的梦想，然后克服这样的困难，我觉得这样的精神是非常值得学习的。
                    8. 梦想能够帮我去击碎所有的犹豫，希望为自己的梦想去努力。
                    9. 我不会假设‘如果’，这本来就是假象，是不可能实现的，如果它是错了，那么认识错误后改正它就好了，不可能重来一次。
                    10. 在喜欢的东西上可以很认真很快乐很努力，你可能很幸运可以获得到一些很好的天赋，或者怎么样，如果不幸运的话还可以获取些更多的快乐。
                    11. 如果你不想输，那每次舞台必须全力以赴。
                    12. 为什么每一件事情都要追究它的意义，单纯的喜欢不行吗？
                `
            },
            {
                title:"博客3",
                tag:"Node",
                content:`13. 尽管去过你们喜欢的生活吧，希望大家都可以健康快乐，活成自己想要的样子。
                    14. 我会按照我的性格去表达我想表达的东西，想尽可能地做自己。想要每个人都了解真实的我那也是不可能的，大家都有自己的观点和角度，也没办法左右别人的想法。大部分的误解其实是无所谓的，还是把自己做好，把心态调整好就好了。
                    15. 赛车只学一个姿势是不能上赛道的，舞蹈学摆几个姿势是没有办法上舞台的。所有的事情要做好，都需要时间和功夫。
                    16. 喜欢的事情要做到极致，喜欢的成分要尽兴演绎。
                    17. 我想对自己说，你已经很努力了。我对自己的要求也会更高，然后希望自己的要求跟追求会更高。
                    18. 在我的世界里，所有有输赢规则的事，不管大小，参与了都应该尊重游戏规则，我都想赢。
                    19. 心在一起，我们就在一起了。
                    20. 盛夏八月，对我来说最特别的事，是能把美好分享给你们。
                `
            },
            {
                title:"博客4",
                tag:"Node",
                content:`21. 别人给的标签，别人给的期待，都不能限制我的人生。
                    22. 许多东西都需要时间来磨炼，这样梦想才会有更多可能性。
                    23. 多做事，少说话，不会争不会抢，默默做自己的事，然后做到最好，然后少说。
                    24. 找到自己的价值，不去迎合别人活，才会觉得有意思。
                    25. 成功等于百分之七十的努力加百分之二十的天赋和百分之十的运气。
                    26. 21岁就认定的事情，我想到了81岁也还能坚持。
                    27. 别拿你的标签，为我的人生标价。
                    28. 业务能力是别人拿不走的资本。
                `
            },
            {
                title:"博客5",
                tag:"Egg",
                content:`29. 强就是强，弱就是弱，只能努力，没有时间哭。
                    30. 如果不出发，就永远不知道自己可以走多远，与其等着被世界挑战，不如迎向它。
                    31. 人生中有很多遗憾，但是没有必要提，遗憾就遗憾，过去就好了。
                    32. 任何事做到极致就是艺术。
                    33. 未来，我们奉陪到底。
                    34. 钱可以赚，青春没了才可惜。
                    35. 我不能只是停留在这儿，我要一直一直往前看，往前不断进步。
                `
            }]
        }
    },
    mounted(){
        this.getNewList(this.pager);
        this.totalBlogs = this.blogList.length;
    },
    methods:{
        // 当当前页变化时，获取页码，获取不同数据
        handleCurrentChange(el){
            this.showList = [];
            this.pager = el;
            this.getNewList(this.pager);
        },
        //通过页码，获取不同数据
        getNewList(currentPage){
            let startblog = (currentPage - 1)*this.pageSize;
            let endblog = currentPage * this.pageSize;
            for(let i = startblog;i < endblog;i++){
                if(this.blogList[i] != null){
                    this.showList.push(this.blogList[i]);
                } 
            }
        },


        // 向博客详情页传递博客列表
        toDetailWithList(id){
            // 打开新页面查看博客详情，但刷新就没有了，还报304提醒
            console.log('发送的',id);
            let url = this.$router.resolve({
                path:`/blogs/${id}`,
            });
            let win = window.open(url.href,'_blank');         
            win['params'] = {
                blogList:JSON.stringify(this.blogList)
            };

            //在原页面直接查看博客详情，但网址中显示传的列表内容。字符串接收为undefined
            // console.log('发送的',typeof id,id);
            // console.log('发送的列表',typeof JSON.stringify(this.blogList),JSON.stringify(this.blogList));
            // this.$router.push({
            //     name:'blogDetail',
            //     params:{
            //         // blogList:JSON.stringify(this.blogList),
            //         id:id
            //     }
            // });  

        }
    }
}
</script>

<style scoped>
.el-main{
    padding:0px;
    margin-left:80px;
    margin-right:80px;
}
.margin-top {
  /* margin-bottom: 5px; */
  padding:15px;
  border-bottom:1px solid rgb(187, 178, 178);
  /* display:none; */
}
.blog-header{
    display:flex;
    margin-bottom:15px;
    /* border:1px solid red; */
}
.blog-header h2{
    padding:0px;
    margin:0px;
    margin-right:50px;
}
.blog-header label, .blog-header .el-tag{
    margin-top:5px;
}
.blog-header .el-button{
    margin-left:350px;
}
.detail-content{
    /* background: rgb(209, 224, 220); */
    padding:0px;
    text-align: left;
}
.detail-content p{
    margin-left:32px;
    margin-top:10px;
    margin-bottom:0px;
    /* 文本内容只显示指定行：-webkit-line-clamp */
    /* 溢出部分隐藏 */
    overflow: hidden;
    /* 溢出部分用...代替 */
    text-overflow: ellipsis;
    /* 将对象作为弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 子元素垂直排列 */
    -webkit-box-orient: vertical;
    /* 具体指定行数 */
    -webkit-line-clamp: 2;
}
.pagination{
    display:flex;
    margin:30px 30px 30px 150px;
}
/* .el-pagination{
    margin-top:10px;
    margin-left:calc((100% - 120px)/2); 
}
.el-switch{
    margin-top:30px;
} */
</style>